<template>
  <el-main class="el-mainContent height100  setting">
         <div class="formItem   content ">
          <el-row  > 
      <p class=" smallHeader">{{$t('policy')}}</p>
        </el-row>
    <el-form label-position="top"  size="small" class="demo-form-inline  ">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('min_length')" >
            <el-input class="input-width" v-model="detail.length"></el-input>
            <div class="tip-text">{{$t('max_length_tip')}}</div>
          </el-form-item>
        </el-col>
        <!-- offset="3" -->
        <el-col :span="6" :offset="4">
          <el-form-item :label="$t('failLoginTimes')"  >
            <el-input class="input-width" v-model="detail.failLoginTimes"></el-input>
            <div class="tip-text">{{$t('nocheck')}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('legal')"  class="marginRight10">
            <div>
              <el-checkbox-group v-model="legalTypeArr" >
              <el-checkbox label="1">{{$t('uppercase')}}</el-checkbox>
              <el-checkbox label="2">{{$t('lowercase')}}</el-checkbox>
              <el-checkbox label="3">{{$t('special_symbols')}}</el-checkbox>
              <el-checkbox label="4" >{{$t('number')}}</el-checkbox>
            </el-checkbox-group>  
            </div>
          </el-form-item>
        </el-col>
        <!-- offset="3" -->
        <el-col :span="6" :offset="6">
         <el-form-item :label="$t('encryptionMode')" >
            <el-select v-model="detail.encryptionMode" @change="hanleChange">
              <el-option :label="$t('teemlinkMode')" value="0"></el-option>
              <el-option :label="$t('sha1Mode')" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('encryptionMode')"    >
            <el-select v-model="detail.encryptionMode" @change="hanleChange">
              <el-option :label="$t('teemlinkMode')" value="0"></el-option>
              <el-option :label="$t('sha1Mode')" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <el-row class="marginTop31">
      <p class="  smallHeader">{{$t('pwd_change')}}</p>
    </el-row>
    <!-- <el-divider content-position="left" class="  smallHeader">密码修改通知策略</el-divider> -->
    <el-form :inline="true" class="demo-form-inline  "  size="small">
    <el-row  >
      <el-col :span="6">
      <el-form-item :label="$t('noticeAuthor')"  class="   radioItem">
        <!-- <el-switch v-model="detail.noticeAuthor"  active-value="1" inactive-value="0"></el-switch> -->
        <el-radio v-model="detail.noticeAuthor" label="1">是</el-radio>
        <el-radio v-model="detail.noticeAuthor" label="0">否</el-radio>
      </el-form-item>
      </el-col>
      <el-col :span="6" :offset="6">
       <el-form-item :label="$t('initPasswordModify') "  class="   radioItem">
        <!-- <el-switch v-model="detail.isFirstLogin"  active-value="true" inactive-value="false"></el-switch> -->
        <el-radio v-model="detail.isFirstLogin" label="1">是</el-radio>
        <el-radio v-model="detail.isFirstLogin" label="0">否</el-radio>
      </el-form-item>
      </el-col>
    </el-row>
   </el-form>
    <el-form v-if="detail.noticeAuthor=='0'"   label-position="top"  size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('maxAge')"    >
            <el-input class="input-width" v-model="detail.maxAge"></el-input>
          </el-form-item>
        </el-col>
        <!-- offset="3" -->
        <el-col :span="6" :offset="6">
          <el-form-item :label="$t('noticeTime')"    >
            <el-input class="input-width" v-model="detail.noticeTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('noticeMethodArr')"    >
            <el-checkbox-group v-model="noticeMethodArr">
              <template v-if="!($store.state.currentUser && $store.state.currentUser.isOpenSecurity)">
                <el-checkbox label="1">{{$t('sms')}}</el-checkbox>
              </template>
              <el-checkbox label="2">{{$t('msg_center')}}</el-checkbox>
              <el-checkbox label="3">{{$t('email')}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      
        <el-col :span="6" :offset="6">
          <el-form-item :label="$t('noticeContent')"    >
            <el-input class="input-width" v-model="detail.noticeContent" name="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </div>
  </el-main>
</template>

<script>


export default {
  data(){
    return {
      noticeMethod:[],
      legaltype:[]
    }
  },
  props:["detail"],
  watch:{
    detail: {
      handler(newVal, oldVal) {
        this.detail = newVal;
        this.noticeMethod = this.detail.noticeMethod
          ? this.detail.noticeMethod.split(",")
          : [];
        this.legaltype = this.detail.legalType
          ? this.detail.legalType.split(",")
          : [];
        this.detail.encryptionMode = this.detail.encryptionMode
          ? this.detail.encryptionMode
          : "0";
      },
      deep: true,
      immediate: true,
    },
  },
  computed:{
    noticeMethodArr:{
      set(val){
        this.noticeMethod=val;
        this.detail.noticeMethod=this.noticeMethod.join(",")
        return this.noticeMethod
      },
      get(){
        return this.noticeMethod
      },
    },
    legalTypeArr:{
      set(val){
        this.legaltype=val;
        this.detail.legalType=this.legaltype.join(",")
        return this.legaltype
      },
      get(){
        return this.legaltype
      },
    },
  },
  created() {
    
  },
  methods: {
    hanleChange(val){
      this.detail.encryptionMode = val;
    },
  },
};
</script>
<style lang="scss" scoped>

</style>